<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>

		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/ajax.js"></script>
		<script src="js/user/register.js"></script>

	</head>
	<body>




		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							<span class="glyphicon glyphicon-apple"></span>
							易小勤考勤系统
							<i class="bi bi-arrow-bar-right"></i>
							注册
						</h4>
					</div>
					<div class="modal-body">
						<!-- 表单开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<label for="userName" class="col-sm-2 control-label">
									<i class="bi bi-person-fill" style="font-size:15px;"></i>
									<!-- 姓名 -->
								</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="userName" v-model="userName"
										placeholder="请输入用户姓名">
								</div>
							</div>

							<div class="form-group">
								<label for="userPhone" class="col-sm-2 control-label">
									<span class="glyphicon glyphicon-phone"></span>
									<!-- 手机 -->
								</label>
								<div class="col-sm-10">
									<input type="tel" class="form-control" id="userPhone" v-model="userPhone"
										placeholder="请输入手机号码">
								</div>
							</div>
							<div class="form-group">
								<label for="userPassword" class="col-sm-2 control-label">
									<span class="glyphicon glyphicon-lock"></span>
									<!-- 密码 -->
								</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="userPassword" v-model="userPassword"
										placeholder="请输入用户密码">
								</div>
							</div>

						</form>
						<!-- 表单结束-->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-warning" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" v-on:click="register">
							<i class="bi bi-person-plus-fill" style="font-size: 15px;"></i>
							&nbsp;注册
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<!-- 注册失败提示框 开始 -->
		<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 600px;height: 251px;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="errorModalLabel">
							<span class="glyphicon glyphicon-remove"></span>
							注册失败
						</h4>
					</div>
					<div class="modal-body">
						<!-- 表单开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<p>&nbsp;</p>
								<p style="text-align: center;" class="form-control-static">
									<span class="glyphicon glyphicon-hand-right"></span> &nbsp;
									用户账号已存在或账号格式输入错误
								</p>
							</div>
						</form>
						<!-- 表单结束-->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 注册失败提示框 结束 -->
	</body>

</html>
